<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>八卦</title>
	<style type="text/css">
		.content {
			border: 300px solid #000;
			border-color: transparent transparent #000 #000;
			margin: 200px auto;
			height: 0;
			width: 0;
			border-radius: 50%;
			box-sizing: border-box;
			position: relative;
			transform: rotate(45deg);
		}
		.content:before {
			content: "";
			box-sizing: border-box;
			display: block;
			width: 600px;
			height: 600px;
			border-radius: 50%;
			border: 1px solid #000;
			position: absolute;
			top: 0;
			left: 0;
			transform: translate(-50%,-50%);
		}
		.white-round {
			width: 300px;
			height: 300px;
			position: absolute;
			background: #fff;
			top: 0;
			transform: translate(-85.4%,-85.4%);
			border-radius: 50%;
		}
		.white-round:after {
			content: "";
			display: block;
			position: absolute;
			width: 100px;
			height: 100px;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			box-sizing: border-box;
			border-radius: 50%;
			background: #000;
		}
		.black-round {
			width: 300px;
			height: 300px;
			position: absolute;
			background: #000;
			top: 0;
			transform: translate(-14.6%,-14.6%);
			border-radius: 50%;
		}
		.black-round:after {
			content: "";
			display: block;
			position: absolute;
			width: 100px;
			height: 100px;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			box-sizing: border-box;
			border-radius: 50%;
			background: #fff;
		}
		.content2 {
			width: 600px;
			height: 300px;
			border-radius: 50%;
			background: #fff;
			margin-right: 300px;
			border: 1px solid #000;
			border-width: 2px 2px 300px 2px;
			position: relative;
			float: left;
			transform: rotate(90deg);
		}
		.content2:before {
			content: "";
			display: block;
			width: 100px;
			height: 100px;
			border: 100px solid #000;
			position: absolute;
			top: 0;
			left: 0;
			transform: translateY(50%);
			background: #fff;
			border-radius: 50%;
		}
		.content2:after {
			content: "";
			display: block;
			width: 100px;
			height: 100px;
			border: 100px solid #fff;
			position: absolute;
			top: 0;
			right: 0;
			transform: translateY(50%);
			background: #000;
			border-radius: 50%;
		}
	</style>
</head>
<body>
	<div class="content">
		<div class="white-round"></div>
		<div class="black-round"></div>
	</div>
	<div class="content2"></div>
</body>
</html>